<script>
import { handleSuccess, handleError } from "@/util/request";

export default {
  name: "LibrarySavePage",
  data() {
    return {
      item: {
        name: null,
        ISBN: null,
        author: null,
        press: null,
        publication_date: null,
        class: null
      },
      rules: {
        name: [
          { required: true, message: '请输入图书名称', trigger: 'blur' }
        ],
        ISBN: [
          { required: true, message: '请输入ISBN号', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入图书作者', trigger: 'blur' }
        ],
        press: [
          { required: true, message: '请输入图书出版社', trigger: 'blur' }
        ],
        publication_date: [
          { required: true, message: '请输入图书出版日期', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '请输入图书所属类别', trigger: 'blur' }
        ]
      },
      action: process.env.VUE_APP_API_BASE + 'book/save'
    }
  },
  methods: {
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/book/save', this.item)
              .then((result)=>{
                handleSuccess(result)
              })
              .catch((error) => {
                handleError(error)
              })
        }
      });
    },
    handleReset(formName) {
      this.$refs[formName].resetFields();
    },
    onSuccess(result) {
      handleSuccess({data: result})
    },
    onError(error) {
      handleError(error)
    }
  }
}
</script>

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>添加新书入库</span>
      <el-upload :action="action"
                 accept=".xls,.xlsx"
                 :show-file-list="false"
                 :on-success="onSuccess"
                 :on-error="onError"
                 with-credentials
                 style="float: right">
        <el-button style="padding: 3px 0" type="text">批量导入Excel</el-button>
      </el-upload>
    </div>
    <el-form label-width="100px" ref="myForm" :model="item" :rules="rules">
      <el-form-item label="图书名称" prop="name">
        <el-input v-model="item.name" placeholder="请输入图书名称" />
      </el-form-item>
      <el-form-item label="ISBN号" prop="ISBN">
        <el-input v-model="item.ISBN" placeholder="请输入ISBN号" />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="item.author" placeholder="请输入图书作者" />
      </el-form-item>
      <el-form-item label="出版社" prop="press">
        <el-input v-model="item.press" placeholder="请输入图书出版社" />
      </el-form-item>
      <el-form-item label="出版日期" prop="publication_date">
        <el-input v-model="item.publication_date" placeholder="请输入图书出版日期" />
      </el-form-item>
      <el-form-item label="图书类别" prop="class">
        <el-input v-model="item.class" placeholder="请输入图书所属类别" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmit('myForm')" type="primary">提交</el-button>
        <el-button @click="handleReset('myForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>

</style>